<!DOCTYPE html>
<html style="height: 100%">
<head>
    <script type="text/javascript" src="/static/fineui/echart/echarts.js"></script>
    <script src="/static/layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <!--设备统计饼图-->
</head>
<body style="height: 100%; margin: 0">
<!--13种状态 设备状态分析-->
<div id="devPieOne" style="height: 49%;width:45%;float:left;"></div>
<!--设备型号分析-->
<div id="devPieTwo"  style="height: 49%;width:55%;float:right;"></div>
<!--设备型号-->
<div id="devPieThree" style="height: 49%;width: 46%;float:left;"></div>
<!--设备型号-->
<div id="devPieFour" style="height: 49%;width: 54%;float:right;"></div>

<script type="text/javascript">
    var dom = document.getElementById("devPieOne");
    var dom2 = document.getElementById("devPieTwo");
    var dom3 = document.getElementById("devPieThree");
    var dom4 = document.getElementById("devPieFour");
    var myChart = echarts.init(dom);
    var myChart2 = echarts.init(dom2);
    var myChart3 = echarts.init(dom3);
    var myChart4 = echarts.init(dom4);
    var app = {};
    var option = null;
    var $;
    layui.use('layer', function() {
        $ = layui.jquery;
        $.post("/devices/devicesStat","n=1",function (respData) {
            //第一个图形 13种状态
            var dataLine = new Array(); //第一个data
            var dataKV = new Array(); //第二个name-value
            var dataStr = "["; //拼接
            for(var i=0;i<respData.length;i++){
                dataLine[i] = respData[i].devicesHistory.id;
                dataStr =dataStr+"{value:" +respData[i].online+", name:'" +
                    respData[i].devicesHistory.id+"'},";
            }
            dataStr=dataStr.substring(0,dataStr.length-1)+"]";
            dataKV=eval("("+dataStr+")");
            var option1 = {
                title: {
                    text: '设备状态分析',
                    subtext: '  ',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter:
                        function(params){
                            str =params.seriesName+'<br/>' + params.name + ' : '+params.value+'('+params.percent + '%)';
                            return str
                        }
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: dataLine
                },
                series: [
                    {
                        name: '设备明细',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '58%'],
                        data:dataKV,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            if (option1 && typeof option1 === "object") {
                myChart.setOption(option1, true);
            }
            //点击事件
            myChart.on('click',function(params){
                layer.msg("正在快马加班..");
                console.log(params);
            });
        });
//第二个图形 设备型号分析 lwh
        $.post("/devices/devicesStat","n=2",function (respData) {
            //第2个图形 设备型号分析
            var data1 = new Array(); //第一个data 左侧
            var data2_1 = new Array(); //第2个data
            var data2_1_1 = []; //第2个data  辅助头大
            var data3_1 = []; //第3个data
            var  line1=[]; //真实数据
            var  line2 = new Array();//真实数据
            var  line3=[];//真实数据
            for(var i=0;i<respData.length;i++){
                data1[i]=respData[i].model;  //以后name改为model !!!
                data1[respData.length+i]=respData[i].devicesHistory.id; //注意 重复字段
                data2_1[i]=respData[i].model;  //名字 配电自动化测控FTU PACS-5612F
                data2_1_1.push([respData[i].model,respData[i].online]); //名字+val
                data3_1.push([respData[i].devicesHistory.id,respData[i].online]); //名字+val 这就是第三个值 排聪法
            }
            data1=strEval(data1);  //以后遍历取d[0]就行
            for(var i=0;i<data1.length;i++){
                line1[i]=data1[i][0];
            }
            data2_1=strEval(data2_1);
            var map = {};//第二个 遍历map
            var map2 = {};//map
            //第二个data
            for(var i=0;i<data2_1_1.length;i++){
                for(var j=0;j<data2_1.length;j++){
                    if(data2_1_1[i][0]==data2_1[j][0]) {
                        map2[data2_1[j][0]]=data2_1_1[i][1];
                        if(map[data2_1[j][0]]!=null){
                            map[data2_1[j][0]]= (map[data2_1[j][0]])+(data2_1_1[i][1]);
                        }else{
                            map[data2_1[j][0]]= (data2_1_1[i][1]);
                        }
                        break; //continue
                    }
                }
            }
            var  line2_2 = "[";//拼接
            var  line3_3 = "[";//拼接
            for(li in map){
                //console.log(li +"--"+ map[li]);//Object.keys(map).length
                line2_2=line2_2+"{value:" +map[li]+", name:'" +
                    li+"'},";
            }
            line2_2=line2_2.substring(0,line2_2.length-1)+"]";
            line2=eval("("+line2_2+")");//第二个
            for(var i=0;i<data3_1.length;i++){
                line3_3 =line3_3+"{value:" +data3_1[i][1]+", name:'" +
                    data3_1[i][0]+"'},";
            }
            line3_3=line3_3.substring(0,line3_3.length-1)+"]";
            line3=eval("("+line3_3+")");//第三个
            console.log(line3);
            var option2 = {
                title: {
                text: '设备类型分析',
                subtext: '  ',
                x: 'center'
            },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data:line1,
                    selectedMode:false//取消图例上的点击事件
                },
                series: [
                    {
                        name:'设备类型',
                        type:'pie',
                        selectedMode: 'single',
                        center: ['50%', '58%'],
                        radius: [0, '45%'],

                        label: {
                            normal: {
                                position: 'inner'
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data:line2
                    },
                    {
                        name:'状态明细',
                        type:'pie',
                        radius: ['55%', '69%'],
                        center: ['50%', '58%'],
                        label: {
                            normal: {
                                formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                                backgroundColor: '#eee',
                                borderColor: '#aaa',
                                borderWidth: 1,
                                borderRadius: 4,
                                rich: {
                                    a: {
                                        color: '#999',
                                        lineHeight: 22,
                                        align: 'center'
                                    },
                                    hr: {
                                        borderColor: '#aaa',
                                        width: '100%',
                                        borderWidth: 0.5,
                                        height: 0
                                    },
                                    b: {
                                        fontSize: 16,
                                        lineHeight: 33
                                    },
                                    per: {
                                        color: '#eee',
                                        backgroundColor: '#334455',
                                        padding: [2, 4],
                                        borderRadius: 2
                                    }
                                }
                            }
                        },
                        data:line3
                    }
                ]
            };
            if (option2 && typeof option2 === "object") {
                myChart2.setOption(option2, true);
            }
            //点击事件
            myChart2.on('click',function(params){
                console.log(params);
            });
        });
//第三个图形 供电单位
        $.post("/devices/devicesStat","n=3",function (respData) {
            //第三个图形 供电单位
            var data1 = new Array(); //第一个data 左侧
            var data2_1 = new Array(); //第2个data
            var data2_1_1 = []; //第2个data
            var data3_1 = []; //第3个data
            var  line1=[]; //真实数据
            var  line2 = new Array();//真实数据
            var  line3=[];//真实数据
            for(var i=0;i<respData.length;i++){
                data1[i]=respData[i].depart_id;
                data2_1[i]=respData[i].depart_id;  //名字 配电自动化测控FTU PACS-5612F
                data2_1_1.push([respData[i].depart_id,respData[i].online]); //名字+val
                data3_1.push([respData[i].devicesHistory.id,respData[i].online]); //名字+val 这就是第三个值 排聪法
            }
            data1=strEval(data1);  //以后遍历取d[0]就行
            for(var i=0;i<data1.length;i++){
                line1[i]=data1[i][0];
            }
            data2_1=strEval(data2_1);
            var map = {};//第二个 遍历map
            var map2 = {};//map
            //第二个data
            for(var i=0;i<data2_1_1.length;i++){
                for(var j=0;j<data2_1.length;j++){
                    if(data2_1_1[i][0]==data2_1[j][0]) {
                        map2[data2_1[j][0]]=data2_1_1[i][1];
                        if(map[data2_1[j][0]]!=null){
                            map[data2_1[j][0]]= (map[data2_1[j][0]])+(data2_1_1[i][1]);
                        }else{
                            map[data2_1[j][0]]= (data2_1_1[i][1]);
                        }
                        break; //continue
                    }
                }
            }
            var  line2_2 = "[";//拼接
            var  line3_3 = "[";//拼接
            for(li in map){
                line2_2=line2_2+"{value:" +map[li]+", name:'" +
                    li+"'},";
            }
            line2_2=line2_2.substring(0,line2_2.length-1)+"]";
            line2=eval("("+line2_2+")");//第二个
            for(var i=0;i<data3_1.length;i++){
                line3_3 =line3_3+"{value:" +data3_1[i][1]+", name:'" +
                    data3_1[i][0]+"'},";
            }
            line3_3=line3_3.substring(0,line3_3.length-1)+"]";
            line3=eval("("+line3_3+")");//第三个
            //console.log(line3);
            var option3 = {
                title: {
                    text: '供电单位分析',
                    subtext: '  ',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data:line1,
                    selectedMode:false//取消图例上的点击事件
                },
                series: [
                    {
                        name:'供电单位',
                        type:'pie',
                        selectedMode: 'single',
                        center: ['50%', '58%'],
                        radius: [0, '45%'],

                        label: {
                            normal: {
                                position: 'inner'
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data:line2
                    },
                    {
                        name:'设备状态明细',
                        type:'pie',
                        radius: ['55%', '69%'],
                        center: ['50%', '58%'],
                        label: {
                            normal: {
                                formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                                backgroundColor: '#eee',
                                borderColor: '#aaa',
                                borderWidth: 1,
                                borderRadius: 4,
                                rich: {
                                    a: {
                                        color: '#999',
                                        lineHeight: 22,
                                        align: 'center'
                                    },
                                    hr: {
                                        borderColor: '#aaa',
                                        width: '100%',
                                        borderWidth: 0.5,
                                        height: 0
                                    },
                                    b: {
                                        fontSize: 16,
                                        lineHeight: 33
                                    },
                                    per: {
                                        color: '#eee',
                                        backgroundColor: '#334455',
                                        padding: [2, 4],
                                        borderRadius: 2
                                    }
                                }
                            }
                        },
                        data:line3
                    }
                ]
            };
            if (option3 && typeof option3 === "object") {
                myChart3.setOption(option3, true);
            }
            //点击事件
            myChart3.on('click',function(params){
                console.log(params);
            });

            //第four个图形
          var option4 = {
                title: {
                    text: '计量资产全生命周期分析',
                    subtext: ' ',
                    x: 'center'
                },
                color: ['#3398DB'],
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : ['华为', '华硕', '小米', '京东方', '联想', '瑞普', '神州'],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        data : [0,1,2,3,4,5,6,7,8,9,10],
                        type : 'category'
                    }
                ],
                series : [
                    {
                        name:'年限',
                        type:'bar',
                        barWidth: '30%',
                        data:[10, 6, 2, 3, 9, 3, 7]
                    }
                ]
            };
            ;
            if (option4 && typeof option4 === "object") {
                myChart4.setOption(option4, true);
            }
        });

    });

    //JS判断一个数组是否有重复值
    function strEval(str1) {
        var res = [];
        str1.sort();
        for (var i = 0; i < str1.length;) {
            var count = 0;
            for (var j = i; j < str1.length; j++) {
                if (str1[i] == str1[j]) {
                    count++;
                }
            }
            res.push([str1[i], count]);
            i += count;
        }
        return res;
    }
</script>
</body>
</html>